// 导入明细
<template>
  <div class="box">
    <el-card>
      <div class="title">
        <el-button type="primary" @click="DoldTemplate('Task')">下载模板</el-button>
        <el-upload
          multiple
          class="upload-demo"
          :headers="headers"
          :action="action"
          :http-request="onUpload"
          accept=".xls,.xlsx"
          :show-file-list="false"
          :on-success="handleSuccess"
          :on-error="handleError"
        >
          <el-button type="primary">导入</el-button>
        </el-upload>
        <el-button type="primary" @click="onSave()">保存</el-button>

        <h2>{{ title }}</h2>
      </div>

      <el-table v-loading="loading" :data="tableData" style="width: 100%" :height="tableHeight" border>
        <el-table-column prop="classname" label="分类" min-width="100" align="center">
          <template slot-scope="scope">
            <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 5 }" v-model="scope.row.classname"></el-input>
          </template>
        </el-table-column>

        <el-table-column prop="keytask" label="重点任务" min-width="250">
          <template slot-scope="scope">
            <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 5 }" v-model="scope.row.keytask"></el-input>
          </template>
        </el-table-column>

        <el-table-column prop="indexnum" width="50" label="序号" align="center"> </el-table-column>

        <el-table-column prop="tasknote" label="工作举措" min-width="300">
          <template slot-scope="scope">
            <el-input type="textarea" v-model="scope.row.tasknote" :autosize="{ minRows: 5, maxRows: 5 }"></el-input>
          </template>
        </el-table-column>

        <el-table-column prop="standstr" label="完成标准" min-width="500">
          <template slot-scope="scope">
            <el-input type="textarea" v-model="scope.row.standstr" :autosize="{ minRows: 5, maxRows: 5 }"></el-input>
          </template>
        </el-table-column>

        <el-table-column prop="objective" label="预期标志性成果" min-width="300" :autosize="{ minRows: 5, maxRows: 5 }">
          <template slot-scope="scope">
            <el-input type="textarea" v-model="scope.row.objective" :autosize="{ minRows: 5, maxRows: 5 }"></el-input>
          </template>
        </el-table-column>

        <el-table-column prop="enddate" label="完成时间" min-width="180">
          <template slot-scope="scope">
            <el-input type="textarea" v-model="scope.row.enddate" :autosize="{ minRows: 5, maxRows: 5 }"></el-input>
          </template>
        </el-table-column>

        <el-table-column prop="workdpname" label="责任部门" min-width="180">
          <template slot-scope="scope">
            <el-input type="textarea" v-model="scope.row.workdpname" :autosize="{ minRows: 5, maxRows: 5 }"> </el-input>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { InfoUpLoad, LedgerSave } from '@/api/task/index'
import { getToken } from '@/utils/auth'

export default {
  name: 'ImportDetails',
  data() {
    return {
      action: '/UpLoadFile/upload',
      headers: {
        Authorization: getToken()
      },
      tableData: [],
      title: '',
      tableHeight: '',
      loading: false,
      userdata: {
        userid: this.$store.getters.userInfo.id,
        username: this.$store.getters.userInfo.username,
        dpid: this.$store.getters.userInfo.orgid,
        dpname: this.$store.getters.userInfo.orgname
      }
    }
  },
  created() {
    // 100是表格外其它布局占的高度，这个数值根据自己实际情况修改
    this.tableHeight = window.innerHeight - 225
  },
  watch: {
    $route: {
      immediate: true,
      handler(newId) {
        if (newId.path == '/Fourth/ProjectEstablishment/ImportDetails') {
          this.tableData = []
        }
      }
    }
  },

  methods: {
    // 点击下载模板
    async DoldTemplate(code) {
      this.downloadFile()
    },
    // 下载本地静态文件
    downloadFile() {
      // 文件放在 public 目录下
      const fileUrl = process.env.BASE_URL + 'EXCELTemplate/督办工作.xlsx'
      const fileName = '督办工作.xlsx'
      const link = document.createElement('a')
      link.href = fileUrl
      link.download = fileName
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    },
    // 文件上传
    onUpload(data) {
      this.loading = true
      // this.index++
      // var file = data.file
      // const maxSize = 300 * 1024 * 1024 // 300MB，根据你的需求设置最大文件大小
      // if (file.size > maxSize) {
      //   this.$Message({
      //     message: `文件大小超过了${maxSize / (1024 * 1024)}MB的限制`,
      //     type: 'warning'
      //   })
      //   return false
      // }
      const formData = new FormData()
      formData.append('file', data.file)
      formData.append('modelCode', 'Task')
      // formData.append('docID', this.$route.query.documentid)
      // formData.append('userID', this.userdata.userid)
      InfoUpLoad(formData)
        .then(result => {
          if (result.success) {
            this.title = result.content.proname
            this.tableData = result.content.detail
            this.$message.success('上传成功')
            this.loading = false
          } else {
            this.$message.error('上传失败')
            this.loading = false
          }
        })
        .catch(err => {
          data.onError()
          this.$message.error('上传失败')
          this.loading = false

          console.error('err:', err)
        })
    },
    // 文件上传成功时的钩子
    handleSuccess(response, file, fileList) {
      console.log('on-success', response)
      console.log('on-success', file)
      console.log('on-success', fileList)
    },
    // 文件上传失败时的钩子
    handleError(err, file, fileList) {
      console.log('on-error', err)
      console.log('on-error', file)
      console.log('on-error', fileList)
    },
    async onSave() {
      const arr = {
        proname: this.title,
        ...this.userdata,
        detail: [...this.tableData]
      }
      if (arr.detail == []) {
        this.$message.error('请导入数据')
      } else if (arr.proname == '') {
        this.$message.error('标题不能为空')
      } else {
        const res = await LedgerSave(arr)
        if (res.success == true) {
          this.$message.success('保存成功')
        }
      }
    }
  }
}
</script>

<style scoped>
.box {
  padding: 20px;
  background-color: #fdfbf2;
}
.el-card {
  background-color: transparent;
}
.box >>> .el-table,
.el-table__expanded-cell {
  background-color: transparent;
  /* border: 1px solid #000; */
}

.box >>> input {
  background-color: transparent;
}
.box >>> .el-select {
  width: 100%;
}
.box >>> .el-table th {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.box >>> .el-table tr {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.title {
  display: flex;
  padding-bottom: 20px;
}
h2 {
  margin: 0 auto;
}
.el-button {
  margin-right: 5px;
}
</style>
